<template>
	<view class="article-item">
		<view class="head">
			<image :src="userInfo.avatarUrl" mode="aspectFill" class="avatar"></image>
			<text class="nic">{{userInfo.nickName}}</text>
		</view>
		<view v-if="!exeImg">
			<!-- 无图片 -->
			<view class="item-title">
				{{article.title}}
			</view>
			<!-- 第一段 -->
			<view class="first-para">
				{{firstPara.content}}
			</view>
			<!-- 底部 -->
			<view class="item-bottom">
				<text class="mark">评论数 0</text>
				<text class="praise">喜欢数 {{article.paraise_num}}</text>
			</view>
		</view>
		<view class="exe-img" v-else>
			<!-- 有图片 -->
			<!-- 左边 -->
			<view class="item-left">
				<view class="item-title">
					{{article.title}}
				</view>
				<!-- 第一段 -->
				<view class="first-para">
					{{firstPara.content}}
				</view>
				<!-- 底部 -->
				<view class="item-bottom">
					<text class="mark">评论数 0</text>
					<text class="praise">喜欢数 {{article.paraise_num}}</text>
				</view>
			</view>
			<!-- 右边 -->
			<view class="item-right">
				<image :src="imgSrc" mode="aspectFill" class="right-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:'',
				imgSrc:'',
				firstPara:''
			}
		},
		computed:{
			exeImg:function(){
				
				for(let art of this.article.content){
					if(art.type === 'img'){
						return true;
					}
				}
				return false;
			}
		},
		props:{
			article:Object
		},
		created() {
			this.getFirstImg()
			this.getUserInfo()
			this.getFirstPara()
		},
		methods:{
			// 获取第一张图片
			getFirstImg(){
				for(let art of this.article.content){
					if(art.type === 'img'){
						this.imgSrc = art.src;
						break;
					}
				}
			},
			// 获取第一段文字
			getFirstPara(){
				for(let art of this.article.content){
					if(art.type === 'txt'){
						this.firstPara = art;
						break;
					}
				}
			},
			// 获取用户信息
			getUserInfo(){
				let user_id = this.article.user_id;
				uniCloud.callFunction({
					name:'user',
					data:{
						type:'getUserById',
						user_id:user_id
					}
				}).then(res => {
					this.userInfo = res.result.data[0]
				})
				.catch(err => {
					console.log('查询用户失败：',err);
				})
			}
		}
	}
</script>

<style>
	.article-item {
		padding: 15rpx;
		border-bottom: 1px solid #f1f1f1;
	}

	.head {
		margin-bottom: 15rpx;
		line-height: 40rpx;
	}

	.avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}

	.nic {
		font-size: 25rpx;
		vertical-align: middle;
	}

	.item-title,
	.first-para{
		width: 100%;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.item-title {
		font-size: 30rpx;
	}
	.first-para {
		color: #aaa;
		font-size: 20rpx;
		margin: 10rpx 0;
		line-height: 30rpx;
	}
	.item-bottom {
		font-size: 20rpx;
		color: #aaa;
	}
	.mark {
		margin-right: 20rpx;
	}
	.exe-img {
		display: flex;
	}
	.item-left {
		width: 70%;
	}
	.item-right {
		width: 30%;
		text-align: center;
	}
	.right-img {
		width: 80%;
		height: 80%;
	}
</style>
